<template>
  <div class="app-container home">
    <el-row :gutter="10" class="mb8" v-if="this.data.status === '31'">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-camera"
          size="mini"
          @click="handleExamine"
          v-hasPermi="['union:shopExamine:toExamine']"
        >审核</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="border-left: 5px solid #568ef2;">
            <span style="margin-left: 10px;">企业信息</span>
          </span>
        </div>
        <div class="text-left" style="margin: 5px 0 5px 10px">
          <span><i class="el-icon-warning"></i> 商户名称：</span>
          <span>{{ this.data.shop_name }}</span>
        </div>
        <div class="text-left" style="margin: 5px 0 5px 10px">
          <span><i class="el-icon-warning"></i> 统一社会信用代码：</span>
          <span>{{ this.data.business_license_sn }}</span>
        </div>
        <div class="text-left" style="margin: 5px 0 5px 10px">
          <span><i class="el-icon-warning"></i> 营业执照有效期：</span>
          <span>{{ this.data.business_license_period }}</span>
        </div>
        <div class="text-left" style="margin: 5px 0 5px 10px">
          <el-image style="width:150px; height:150px" :src="this.data.business_license_photo" :preview-src-list="imageBusinessLicensePhotoList">
            <div slot="placeholder" class="image-slot"></div>
            加载中<span class="dot">...</span>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </div>
      </el-card>
    </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span style="border-left: 5px solid #568ef2;">
            <span style="margin-left: 10px;">法人信息</span>
          </span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 经营者姓名：</span>
            <span>{{ this.data.legal_person_name }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 经营者身份证号：</span>
            <span>{{ this.data.legal_person_idcard_no }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 经营者身份证有效期：</span>
            <span>{{ this.data.legal_person_idcard_period }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <el-image style="width:150px; height:150px" :src="this.data.legal_person_idcard_photo_front" :preview-src-list="imageLegalPersonIdcardPhotoList">
              <div slot="placeholder" class="image-slot"></div>
              加载中<span class="dot">...</span>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span style="border-left: 5px solid #568ef2;">
            <span style="margin-left: 10px;">开户银行</span>
          </span>
          </div>
          <template v-if="this.data.corp_type === '2'">
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 开户名称：</span>
              <span>{{ this.data.bank_name }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 个人银行卡号：</span>
              <span>{{ this.data.account_no }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 开户银行：</span>
              <span>{{ this.data.bank_pro }} {{ this.data.bank_city }}</span>
            </div>
          </template>
          <template v-else>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 开户名称：</span>
              <span>{{ this.data.account_name }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 个人银行卡号：</span>
              <span>{{ this.data.account_no }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 开户银行：</span>
              <span>{{ this.data.bank_name }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 预留手机号：</span>
              <span>{{ this.data.account_mobile }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <span><i class="el-icon-warning"></i> 开户行所在地：</span>
              <span>{{ this.data.bank_pro }} {{ this.data.bank_city }}</span>
            </div>
            <div class="text-left" style="margin: 5px 0 5px 10px">
              <el-image style="width:150px; height:150px" :src="this.data.business_bank_card_photo_back" :preview-src-list="imageBusinessBankCardPhotoList">
                <div slot="placeholder" class="image-slot"></div>
                加载中<span class="dot">...</span>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </template>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span style="border-left: 5px solid #568ef2;">
            <span style="margin-left: 10px;">店铺信息</span>
          </span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 商铺名称：</span>
            <span>{{ this.data.shop_name }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 商家电话：</span>
            <span>{{ this.data.shop_phone }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 经营地址：</span>
            <span>{{ this.data.shop_address }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 商家折扣：</span>
            <span>{{ this.data.shop_discount }} %</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 商家类型：</span>
            <span>{{ this.data.industry_name }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <span><i class="el-icon-warning"></i> 商家介绍：</span>
            <span>{{ this.data.shop_remark }}</span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <el-image style="width:150px; height:150px" :src="this.data.image_a" :preview-src-list="imageShopPhotoList">
              <div slot="placeholder" class="image-slot"></div>
              加载中<span class="dot">...</span>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="border-left: 5px solid #568ef2;">
              <span style="margin-left: 10px;">合同信息</span>
            </span>
          </div>
          <div class="text-left" style="margin: 5px 0 5px 10px">
            <el-image style="width:150px; height:150px" :src="contract" :preview-src-list="imageContractList">
              <div slot="placeholder" class="image-slot"></div>
              加载中<span class="dot">...</span>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-divider />

    <el-table v-loading="loading" :data="list">
      <el-table-column label="操作人" align="center" prop="operator">
        <template slot-scope="scope">
          <template v-if="scope.row.nick_name != null">{{ scope.row.nick_name }}</template>
          <template v-if="scope.row.username != null">{{ scope.row.username }}</template>
        </template>
      </el-table-column>
      <el-table-column label="审核前状态" align="center" prop="pre_status" :formatter="formatPreStatus" />
      <el-table-column label="审核后状态" align="center" prop="post_status" :formatter="formatPostStatus" />
      <el-table-column label="操作时间" align="center" prop="operate_time" />
      <el-table-column label="备注" show-overflow-tooltip align="center" prop="operate_desc" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getVerifyLog"
      :auto-scroll="false"
    />

    <el-dialog title="审核商家" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="审核原因" prop="desc">
          <el-input type="textarea" v-model="form.desc" :rows="2" placeholder="请输入审核原因" />
        </el-form-item>

        <el-form-item label="是否通过" prop="type">
          <el-radio v-model="form.type" label="1">是</el-radio>
          <el-radio v-model="form.type" label="0">否</el-radio>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleToExamine">审核</el-button>
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { info, contract, verifyLog, toExamine } from '@/api/union/shopExamine'
import { formatShopStatus } from '@/utils/shop'

export default {
  name: 'shopExamineView',
  data() {
    return {
      imageBusinessLicensePhotoList: [],
      imageLegalPersonIdcardPhotoList: [],
      imageBusinessBankCardPhotoList: [],
      imageShopPhotoList: [],
      imageContractList: [],

      data: {},
      contract: null,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopId: null,
        orderByColumn: "operate_time",
        isAsc: "desc",
      },
      loading: false,
      list: [],
      form: {},
      rules: {
        desc: [
          { required: true, message: '请输入审核原因', trigger: 'blur' }
        ]
      },
      open: false
    }
  },
  created() {
    const shopId = this.$route.params.shopId
    this.queryParams.shopId = shopId

    this.getInfo(shopId)
    this.getContract(shopId)
    this.getVerifyLog()

  },
  methods: {
    getInfo(shopId) {
      info(shopId).then(response => {
        this.data = response.data

        this.imageShopPhotoList.push(this.data.image_a, this.data.image_b, this.data.image_c)
        this.imageBusinessLicensePhotoList.push(this.data.business_license_photo)
        this.imageBusinessBankCardPhotoList.push(this.data.business_bank_card_photo_front, this.data.business_bank_card_photo_back)
        this.imageLegalPersonIdcardPhotoList.push(this.data.legal_person_idcard_photo_front, this.data.legal_person_idcard_photo_back)
      })
    },
    getContract(shopId) {
      contract(shopId).then(response => {
        this.contract = response.data[0]
        this.imageContractList = response.data;
      })
    },
    getVerifyLog() {
      verifyLog(this.queryParams).then(response => {
        this.list = response.rows
        this.total = response.total
      })
    },
    formatPreStatus(row) {
      return formatShopStatus(row.pre_status)
    },
    formatPostStatus(row) {
      return formatShopStatus(row.post_status)
    },
    handleExamine() {
      this.form = {
        desc: null,
        type: "1",
        shopId: this.queryParams.shopId
      }

      this.open = true
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    handleToExamine() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          toExamine(this.form).then(response => {
            if (response.code !== 200) {
              this.msgError(response.msg)
            } else {
              this.msgSuccess(response.msg)
            }
          })
        }
      })
    }
  }
}
</script>

<style>
.home{
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #676a6c;
  overflow-x: hidden;
}
.image-slot {
  font-size: 30px;
  width: 49%;
}
</style>
